<script setup>
import { ref } from "vue";

const props = defineProps({
  banners: {
    type: Array,
  },
});

const activeIndex = ref(0);
const onChangeSwiper = (e) => {
  activeIndex.value = e.detail.current;
};
</script>

<template>
  <view class="swiper-container">
    <!-- 轮播图 -->
    <swiper class="swiper-wrap" autoplay circular @change="onChangeSwiper">
      <swiper-item v-for="item in props.banners" :key="item.encodeId">
        <image class="swiper-img" :src="item.imageUrl" mode="scaleToFill" />
      </swiper-item>
    </swiper>

    <!-- 轮播图指示器 -->
    <view class="indicator-wrap">
      <view
        class="indicator-dots"
        :class="{ indicatorActive: index === activeIndex }"
        v-for="(item, index) in props.banners"
        :key="item.encodeId"
      ></view>
    </view>
  </view>
</template>

<style lang="scss">
.swiper-container {
  margin-top: 20rpx;
  padding: 0px 30rpx;
  position: relative;

  .swiper-wrap {
    border-radius: 20rpx;
    background-color: rgb(237, 237, 237);
    overflow: hidden;

    .swiper-img {
      width: 100%;
      height: 100%;
    }
  }

  .indicator-wrap {
    position: absolute;
    bottom: 0rpx;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;

    .indicator-dots {
      margin: 10rpx;
      width: 30rpx;
      height: 4rpx;
      background-color: #ddd;
      box-shadow: 1px 0px 1px #333;
    }

    .indicatorActive {
      background-color: $primaryColor;
    }
  }
}
</style>
